<template>
    <div>
        <el-row class="section">
            <el-col class="offset">
                <div class="info">
                    <div class="line"></div>
                    <div class="text">基本信息</div>
                </div>
                <el-form :inline="true" class="demo-input-size">
                    <!-- 物品表单项 -->
                    <el-form-item class="offset1">
                        <el-form-item label="入库方式">
                            <el-select v-model="orderParam.inboundMethod" placeholder="请选择">
                                <el-option v-for="InboundMethod in InboundMethodDate" :key="InboundMethod.id"
                                    :label="InboundMethod.name" :value="InboundMethod.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form-item>
                    <el-form-item class="offset">
                        <template slot="label">
                            <span>采购人</span>
                            <span style="color: red;">*</span>
                        </template>
                        <el-input v-model="orderParam.purchaser" size="medium" placeholder="请输入"
                            style="width:200px"></el-input>
                    </el-form-item>
                    <el-form-item class="offset">
                        <template slot="label">
                            <span>采购价</span>
                            <span style="color: red;">*</span>
                        </template>
                        <el-input :disabled="isDisabled" size="medium" placeholder="完成表单明细后自动计算"
                            style="width:230px"></el-input>
                    </el-form-item>
                    <el-form-item class="offset">
                        <template slot="label">
                            <span>登记人</span>
                        </template>
                        <el-input v-model="orderParam.registrants" size="medium" placeholder="请输入" style="width:200px"
                            :readonly="true"></el-input>
                    </el-form-item>
                    <el-form-item class="offset">
                        <el-form-item label="生产厂家">
                            <el-select v-model="orderParam.manufacturer" placeholder="请选择" @change="queryMaterialInfo">
                                <el-option v-for="Manufacturer in DictManufacturerDate" :key="Manufacturer.id"
                                    :label="Manufacturer.name" :value="Manufacturer.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form-item><br>
                    <el-form-item class="offset">
                        <template slot="label">
                            <span>备注</span>
                        </template>
                        <el-input v-model="orderParam.remark" type="textarea" placeholder="请输入内容"
                            style="width: 900px;"></el-input>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col class="offset">
                <!-- 放表格数据 -->
                <el-table :data="tableData" style="width: 90%">
                    <el-table-column prop="id" label="序号" width="80">
                    </el-table-column>
                    <el-table-column prop="itemCode" label="物资编码" width="150">
                    </el-table-column>
                    <el-table-column prop="itemName" label="物资名称" width="150">
                    </el-table-column>
                    <el-table-column prop="manufacturerName" label="生产厂商" width="200">
                    </el-table-column>
                    <el-table-column prop="store" label="数量">
                    </el-table-column>
                    <el-table-column prop="packingUnitsName" label="单位">
                    </el-table-column>
                    <el-table-column prop="purchasePrice" label="采购价">
                    </el-table-column>
                    <el-table-column prop="retailPrice" label="零售价">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作">
                        <template slot-scope="scope">
                            <el-button @click="deleteRow(scope.row.id)" type="text" size="small"
                                style="color: red;">删除</el-button>
                        </template>
                    </el-table-column>
                    <template v-slot:append>
                        <el-button @click="putawayVisible = true" type="primary" round
                            style="margin-left: 450px;">+新增物资</el-button>
                    </template>
                </el-table>
            </el-col>
            <el-row class="offset offset2">
                <el-button type="primary" @click="Save">提交审核</el-button>
                <el-button type="small" @click="Cancel">取消</el-button>
            </el-row>
        </el-row>
        <el-dialog :visible.sync="putawayVisible" width="60%" height="100%" :show-close="false"
            :close-on-click-modal="false">
            <template slot="title">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <span style="margin-right:auto;">新增物资</span>
                    <el-input v-model="search" size="small" placeholder="可输入简拼、物资编码、名称"
                        style="margin-left: 1em; width: 250px;" class="search-input" @input="searchByKeyword">
                        <template slot="append">
                            <el-button icon="el-icon-search" size="small" type="text"
                                @click="searchByKeyword(search)"></el-button>
                        </template>
                    </el-input>
                </div>
            </template>
            <el-row justify="center" style="margin-top: -20px;">
                <el-col>
                    <el-button size="medium" @click="queryTableData2('goods')">物品</el-button>
                    <el-button size="medium" @click="queryTableData2('medicine')">药品</el-button>
                </el-col>
            </el-row>
            <el-table :data="filteredData" height="250" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="pinyinCode" label="简拼" width="100">
                </el-table-column>
                <el-table-column prop="itemCode" label="物资编码" width="120">
                </el-table-column>
                <el-table-column prop="itemName" label="物资名称" width="120">
                </el-table-column>
                <el-table-column label="规格型号" width="120">
                    <template slot-scope="scope">
                        {{ scope.row.spAndModels }}/{{ scope.row.packingUnitsName }}
                    </template>
                </el-table-column>
                <el-table-column prop="purchasePrice" label="采购价">
                </el-table-column>
                <el-table-column prop="retailPrice" label="零售价">
                </el-table-column>
                <el-table-column prop="store" label="库存">
                </el-table-column>
                <el-table-column prop="manufacturerName" label="生产厂商" width="160">
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="putawayVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmSelection">确定选择</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            employee: {
                name: ''
            },
            search: '',
            isDisabled: true,
            putawayVisible: false,
            DictManufacturerDate: [ //生产厂家

            ],
            InboundMethodDate: [ //入库方式

            ],
            orderParam: {
                inboundMethod: '',
                manufacturer: '',
                purchaser: '',
                registrants: '',
                remark: ''
            },
            tableData: [],
            tableData2: [],
            filteredData: [],
            selectionDate: [

            ],
            lastManufacturer: '',
        }
    },
    methods: {
        Cancel() {
            this.tableData2 = [];
            this.$router.push({ path: '/materialStorage' })
        },
        handleSelectionChange(val) {
            this.selectionDate = val;
        },
        confirmSelection() {
            this.selectionDate.forEach(item => {
                if (!this.tableData.some(data => data.id === item.id)) {
                    this.tableData.push(item);

                    // 从 tableData2 中移除这个项目
                    let index = this.tableData2.findIndex(data2 => data2.id === item.id);
                    if (index !== -1) {
                        this.tableData2.splice(index, 1);
                    }
                }
            });
            this.putawayVisible = false;
            this.selectionDate = [];
        },
        searchByKeyword(keyword) {
            if (keyword === '') {
                this.filteredData = [];
            } else {
                this.filteredData = this.tableData2.filter(
                    data =>
                        data.pinyinCode.includes(keyword) ||
                        data.itemCode.includes(keyword) ||
                        data.itemName.includes(keyword)
                );
            }
        },
        //查询生产厂家
        queryManufacturer() {
            this.$axios.get('api/dict/queryDict/' + 13)
                .then(res => {
                    if (res.data.code == 200) {
                        this.DictManufacturerDate = res.data.data
                    }
                })
        },
        //查询入库方式
        queryInboundMethod() {
            this.$axios.get('api/dict/queryDict/' + 42)
                .then(res => {
                    if (res.data.code == 200) {
                        this.InboundMethodDate = res.data.data
                    }
                })
        },
        //查询物资维护信息
        queryMaterialInfo() {
            this.tableData2 = [];
            // 清空数据
            let manufacturerid = this.orderParam.manufacturer
            if (manufacturerid !== this.lastManufacturer) {
                // 清空数据
                this.tableData = [];
                this.lastManufacturer = manufacturerid;  // 更新上一次选择的厂家
            }
            let id = this.orderParam.manufacturer
            this.$axios.get('api/material/queryMaterialByManufacturer/' + id)
                .then(res => {
                    if (res.data.code == 200) {
                        this.tableData2 = res.data.data
                    }
                })
        },
        //获取当前登录人
        queryEmployee() {
            this.$axios.get('api/employee/queryOperator')
                .then(res => {
                    this.employee = res.data.data
                    this.orderParam.registrants = this.employee.name
                })
        },
        //根据物品和药品查询tableData2数据
        filterData(addType) {
            return this.tableData2.filter(item => item.addType === addType);
        },
        queryTableData2(type) {
            let tempData = this.tableData2;

            if (type === 'goods') {
                tempData = this.filterData('goods');
            } else if (type === 'medicine') {
                tempData = this.filterData('medicine');
            }

            // 过滤掉已经在 tableData 中的项目
            this.filteredData = tempData.filter(temp => !this.tableData.some(data => data.id === temp.id));
            console.log(this.filteredData)
        },
        deleteRow(id) {
            // 从 tableData 中删除对应索引的数据项
            let index = this.tableData.findIndex(item => item.id === id);
            if (index !== -1) {
                this.tableData.splice(index, 1);
            }
        },
        Save() {
            let param = {};
            let ids = this.tableData.map(item => item.id);
            param.materialStorage = this.orderParam;
            param.ids = ids;
            if (!param.materialStorage || !param.ids.length) {
                this.$message({
                    type: 'error',
                    message: '提交失败!'
                });
                return;
            }
            this.$axios.post('api/materialStorage/addMaterialwhItem', param)
                .then(res => {
                    if (res.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '提交成功!'
                        });
                        this.$router.push({ path: '/materialStorage' })
                    }else{
                        this.$message({
                            type: 'error',
                            message: '基本信息有误!'
                        });
                    }
                })
        },
        resetPutawayDialog() {
            this.tableData2 = []; // 清空数据
            this.filteredData = []; // 清空过滤后的数据
            this.search = ''; // 清空搜索框内容
        },
    },
    watch: {
        putawayVisible: function (newVal) {
            if (newVal) {
                this.resetPutawayDialog(); // 在打开对话框时重置内容
                if (this.orderParam.manufacturer) {
                    this.queryMaterialInfo();
                }
            }

        },
    },
    created() {
        this.queryManufacturer();
        this.queryInboundMethod();
        this.queryEmployee();
    }
}
</script>

<style scoped>
.section {
    width: 1100px;
    height: 800px;
    background-color: white;
    margin-left: 100px;
    margin-top: 20px;
}

.offset {
    margin-top: 25px;
    margin-left: 50px;
}

.offset1 {
    margin-left: 1px;
}

.offset2 {
    margin-left: 900px;
}

.info {
    display: flex;
    align-items: center;
}

.line {
    width: 3px;
    /* 改变线的宽度 */
    height: 20px;
    /* 改变线的高度 */
    background-color: rgb(0, 174, 255);
    /* 改变线的颜色 */
    margin-right: 8px;
}

.text {
    color: rgb(0, 174, 255);
}
</style>